/** * @Description:底部添加购物车按钮 * @author Administrator */
<template>
	<view class="addShopcar">
		<button class="bottomButton" @click="orderShow = true">添加到购物车</button>

		<u-modal v-model="showModal" z-index="1076">
			<view class="slot-content">
				<p>以下菜单没有选择</p>
				<p>
					<span v-for="(item, idx) of noCheckedContent" :key="idx">{{ item.content }}、</span>
				</p>
			</view>
		</u-modal>
		
		<!-- 下单弹窗 -->
		<u-modal v-model="orderShow" z-index="1075" show-cancel-button="true" content="确定添加到购物车吗？" @confirm="toShopcar" ref="uModal" :async-close="true"></u-modal>

		<u-toast ref="uToast" />
		
	</view>
</template>

<script>
	import * as api from '@/api/apiList/user/order.js';

	import {
		createNamespacedHelpers
	} from 'vuex'
	const {
		mapState,
		mapMutations
	} = createNamespacedHelpers('unSignModule')

	export default {
		props: {
			stopTime: {
				//截单时间
				type: String,
				required: true
			},
			menuId: {
				//菜单id
				type: String
			},
			date: {
				//当前选中的日期
				type: String
			}
		},
		data() {
			return {
				showModal: false, //是否显示提示弹窗
				noCheckedContent: [], //没有勾选的内容
				orderShow:false//下单弹窗
			};
		},
		computed: {
			...mapState(["shopCarMenuList"])
		},
		methods: {
			...mapMutations(["GET_shopCarMenuList", "GET_menus", "GET_enterprise","GET_selectExptxt"]),
			async toShopcar() {
				//添加到购物车按钮点击事件
				console.log(this.$parent)
				let menuList = this.$parent.selectExptxt.content //所有菜单
				let checkedMenuList = this.$parent.$refs.menuList.checkedMenuList //选中的菜单
				let menus = this.$parent.menus
				let enterprise = this.$parent.enterprise
				let selectExptxt = this.$parent.selectExptxt
				
				let selectExptxtMenu = this.$u.deepClone(selectExptxt);
				selectExptxtMenu.content = checkedMenuList
				
				// console.log(menuList)
				console.log(checkedMenuList)
				let bool = this.signFilter(menuList, checkedMenuList)
				if (bool) { //如果验证通过
					let arr = this.shopCarMenuList

					arr.push(JSON.parse(JSON.stringify(selectExptxtMenu)))
					this.GET_shopCarMenuList(arr)
					this.GET_menus(menus)
					this.GET_enterprise(enterprise)
					// this.GET_selectExptxt(selectExptxt)
					// this.GET_selectExptxtMenu(selectExptxtMenu)
					this.$refs.uToast.show({
						title: '添加成功',
						type: 'success',
					})
					uni.switchTab({//刷新页面
					    url: '/pages/home/home'
					});
					this.$parent.$refs.menuList.clearCheckedMenuList()//清空选中的菜单
					this.orderShow = false
				}
				
			},
			signFilter(menuList, obj) {
				//签约处理方式(必须所有类型都选中，漏选需要提醒)
				let bool = false;
				let arr = [];
				console.log(menuList)
				
				for (let key in obj) {
					if (menuList[key].length > 0) {
						if (key !== 'other') {
							//非其他
							if (!obj[key].title) {
								arr.push({
									key
								});
							}
						} else {
							//其他
							if (!obj[key].length) {
								arr.push({
									key
								});
							}
						}
					}
				}
				
				arr.forEach(item => {
					if (item.key === 'main') {
						item.content = '主菜';
					} else if (item.key === 'side') {
						item.content = '副菜';
					} else if (item.key === 'vegetables') {
						item.content = '青菜';
					} else if (item.key === 'staple') {
						item.content = '小食';
					} else if (item.key === 'other') {
						item.content = '其他';
					}
				});
				this.noCheckedContent = arr;
				if (!arr.length) {
					return (bool = true);
				} else {
					this.showModal = true;
					this.orderShow = false
					return (bool = false);
				}
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.addShopcar {
		z-index: 99;
		position: fixed;
		left: 0;
		bottom: 50px;
		width: 100%;

		.bottomButton {
			padding: 0;
			background: #f43a3d;
			border-radius: 50rpx;
			color: #ffffff;
			letter-spacing: 1rpx;
			font-size: 30rpx;
		}

		.slot-content {
			font-size: 32rpx;

			p {
				text-align: center;
				padding-top: 30rpx;
				padding-bottom: 50rpx;
				line-height: 30%;
			}

			span {
				color: #dd6161;
				text-align: center;
				line-height: 30%;
				display: inline-block;
			}
		}
	}
</style>
